<template>
  <div>
    <el-row>
      <el-col :span="4" :offset="14">
        <Search
          :searchVal="userId"
          @update:searchVal="userId = $event"
          placeholder="请输入"
        />
      </el-col>
    </el-row>
    <BookListCom />
  </div>
</template>

<script lang="ts">
import { ref, watch } from "vue";
 import { getMainPost } from "@/store/main"
 import BookListCom from "./component/BookList/index.vue";
 import Search from "@/components/Search/index.vue";
 import { debounce } from "@/common/unite";

export default {
  components: {
    Search,
    BookListCom
  },
  setup() {
    const userId = ref('')

    const debounceGetData = debounce(() => {
      getMainPost({
        option: {
          userId: userId.value
        }
      })
    }, 500)

    watch(() => userId.value, () => {
      debounceGetData()
    }, {
      immediate: true
    })

    return {
      userId
    }
  }
}
</script>
